<!-- banner配置详情 -->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title="'福分记录'"
    :body-style="{ paddingBottom: '80px' }"
    :maskClosable="false"
    width="40%"
    :close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="24">
        <GzTable
          ref="infoTableRef"
          :req-table-data-func="reqTableDataFunc"
          :initData="false"
          :table-columns="tableColumns"
          :scrollX="500"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'infoType'">
              <template v-if="record.infoType === 'ACTIVITY'">活动</template>
              <template v-if="record.infoType === 'COUPON'">卡券</template>
              <template v-if="record.infoType === 'GOODS'">实物奖品</template>
              <template v-if="record.infoType === 'VIRTUAL'">虚拟券</template>
            </template>
          </template>
        </GzTable>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { req, API_URL_FANS_SCORE_DETAIL } from '@/api/manage'
import { reactive,ref, nextTick, getCurrentInstance } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 表格实例
const infoTableRef = ref()

// 数据源
const vdata: any = reactive({
  visible: false, // 是否显示弹层/抽屉
})

// 表格
const tableColumns = reactive([
  { title: '变动福分', key: 'score', dataIndex: 'score' },
  { title: '变动原因', key: 'name', dataIndex: 'name' },
])
// 表格数据
const reqTableDataFunc = (params) => {
  return req.add(API_URL_FANS_SCORE_DETAIL, { ...params, userId: vdata.userId })
}

// 弹出框
function show(userId: string) {
  vdata.userId = userId
  vdata.visible = true
  nextTick(() => {
    infoTableRef.value.refTable(true)
  })
}
// 关闭弹出框
function onClose() {
  vdata.visible = false
}
//抛出show函数给父组件
defineExpose({
  show,
})
</script>
<style scoped>
</style>
